<template>
  <div class="userpersonal" style="height: 100%">
    <el-button @click="mydrawer" drawer=true type="primary">
    </el-button>
    <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <div class="mytitle">
        <h3>我的优惠券</h3>
        <span>(共有{{couponsData.length}}张)</span>
      </div>
      <span>
        <div class="infinite-list-wrapper" style="overflow:auto">
          <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
            <!--                 :style="{backgroundColor:'rgb('+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+'0.25)'}"-->
            <li v-for="i in couponsData" :key="i.coupon_id" class="list-item">
              <p>￥{{i.price}}</p>
              <p>{{i.coupon_name}}</p>
              <p>
                有效期至：
              </p>
              <p>{{i.end_time}}</p>
              <p>{{i.usearea_name}}</p>
              <img src="../../assets/img/luouuuuu.png" alt="">
            </li>
          </ul>
        </div>
      </span>
    </el-drawer>
    <div id="myCharts" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
  import * as api from '../../utils/api'
  export default {
    name: "gerenxinxi",
    // 从右向左打开我的优惠券
    data() {
      return {
        drawer: false,
        direction: 'rtl',
        myData: '',
        couponsData: [],
        trafficWayData: '',
        loading: false,
        loginData: {},
      };
    },
    created() {
      this.loginData = this.$store.state.msgCount.user
      // console.log(this.$store.state.msgCount.user)
      this.axios({
        url: api.Get_QUERTUSER,
        method: 'get',
        params: {
          userName: this.loginData.user_phone
        }
      }).then(data => {
        // console.log(123)
        // console.log(data)
        this.trafficWayData = data.data.data[0]
        // console.log(this.trafficWayData)
        this.trafficWayData = [{
            name: '用户名:' + data.data.data[0].user_name,
            value: 30,
          },
          {
            name: "联系电话:" + data.data.data[0].user_phone,
            value: 20,
          },
          {
            name: "身份证号码：" + data.data.data[0].user_idnum,
            value: 30,
          },
          {
            name: "保单信息",
            value: 40,
          },
          {
            name: "车主卡信息",
            value: 30,
          },
          {
            name: "我的优惠券",
            value: 30,
          },
        ]
        this.drawLine()
      })
      // this.searchData(null)
    },
    computed: {
      // noMore(){
      //   // 一共加载的条数为5  之后显示为没有更多了
      //   return this.data>=5
      // },
      // disabled(){
      //   return this.loading||this.noMore
      // },
    },
    methods: {
      // 点击关闭优惠券弹框的方法
      handleClose(done) {
        done()
      },
      // 优惠券列表的定时器函数
      load() {
        this.loading = true
        // setTimeout(()=>{
        //     this.data+=1
        //     this.loading=false
        // },2000)
      },
      // echarts的图表函数
      drawLine() {
        //  在需要添加图标的组件中创建依赖的实例
        var echarts = require("echarts");
        //  基于准备好的dom节点，初始化echarts实例
        var myCharts = echarts.init(document.getElementById("myCharts"));
        var img =
          "";
        let imgSrc =
          "";
        let biao =
          "";
        var trafficWay = this.trafficWayData

        var data = [];
        var color = [
          "#00ffff",
          "#00cfff",
          "#006ced",
          "#ffe000",
          "#ffa800",
          "#ff5b00",
          "#ff3000",
        ];
        for (var i = 0; i < this.trafficWayData.length; i++) {
          data.push({
            value: this.trafficWayData[i].value,
            name: this.trafficWayData[i].name,
            itemStyle: {
              normal: {
                // 标签线框
                borderWidth: 5,
                // 图形阴影模糊大小
                shadowBlur: 20,
                // 边框颜色
                borderColor: color[i],
                // 阴影颜色
                shadowColor: color[i],
              },
            },
          }, {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          });
        }
        var seriesOption = [{
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              // 白色框的样式配置
              label: {
                formatter: "{b|{b}} \n{sj|}", // 字和蓝色小三角显示在白色方框的位置
                show: true,
                width: 300,
                height: 80,
                padding: [-33, -4, 0, 0],
                backgroundColor: "#fff", // 方框的颜色为白色
                shadowColor: "#D6DAE0",
                shadowBlur: 4,
                // 边框切圆角
                borderRadius: 5,
                position: "top",

                // rich 中如果没有设置 align，则会取父层级的 align
                // width、height只能在定义了rich属性的情况下使用。align、verticalAlign只有在定义了width、height的情况下才有意义，
                rich: {
                  b: {
                    color: "#515151",
                    fontWeight: 600,
                    fontSize: 14,
                    lineHeight: 30,
                    padding: [-90, 0, 0, 30],
                    align: "left",
                  },
                  sj: {
                    backgroundColor: {
                      image: biao, //小三角的图片
                    },
                    // 框里蓝色三角的配置
                    align: "left",
                    width: 30,
                    height: 30,
                  },
                  value: {
                    lineHeight: 0,
                    fontSize: 14,
                    padding: [-110, 0, 0, 10],
                  },
                },
              },
              // 连接线的样式配置
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: this.trafficWayData,
          textStyle: {
            color: "white",
          },
        }, ];
        // 绘制图表
        myCharts.setOption({
          backgroundColor: "#0A2E5D",
          color: color,
          // 配置主标题
          title: {
            left: "center",
            top: "100px",
            // 主标题与副标题之间的间隔
            itemGap: 10,
            text: "用户个人信息",
            // 主标题配置样式
            textStyle: {
              // 标题组件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
              paddinh: "20px",
              color: "white",
              fontStyle: "normal",
              fonntWeight: "bold",
              fontFamily: "sans-serif",
              fontSize: "32",
              // 文字本身描边颜色
              textBorderColor: "#000",
              // 文字本身的描边宽度
              textBorderWidth: 3,
              // 主标题文字本身的阴影长度
              textShadowBlur: 5,
              // 主标题文字本身的阴影颜色
              textShadowColor: "green",
              // 主标题本身文字的阴影水平偏移
              textShadowOffsetX: 5,
              // 主标题本身文字的阴影垂直偏移
              textShadowOffsetY: 5,
            },
          },

          // 中心 人物图片的样式配置
          graphic: {
            elements: [{
                // 一个图形元素，类型是 image。
                type: "image",
                // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                z: 3,
                style: {
                  image: img,
                  width: 178,
                  height: 178,
                },
                left: "center",
                top: "center",
                position: [100, 100],
              },
              {
                type: "image",
                z: 4,
                style: {
                  image: imgSrc,
                  width: 178,
                  height: 178,
                },
                left: "center",
                top: "center",
                position: [100, 100],
              },
            ],
          },
          tooltip: {
            // 标题的组件显示与否
            show: false,
          },
          toolbox: {
            show: false,
          },
          series: seriesOption,
        });
        // 点击事件
        // 保单信息的点击事件
        myCharts.on('click', {
          dataIndex: 3
        }, function (obj) {
          window.location.href = 'http://localhost:8080/#/userHome/userInsurance'
          // console.log(obj)
        })
        // 车主卡信息的点击事件
        myCharts.on('click', {
          dataIndex: 4
        }, function (obj) {
          // console.log(obj)
          window.location.href = 'http://localhost:8080/#/userHome/usercarcard'

        })
        // 我的优惠券的点击事件
        myCharts.on('click', {
          dataIndex: 5
        }, function (obj) {
          this.drawer = true
          // console.log(obj)
        })

      },
      // 显示抽屉
      mydrawer() {
        this.drawer = true
        this.loginData = this.$store.state.msgCount.user
        this.axios({
          method: 'get',
          url: api.GET_USERCOUPON,
          params: {
            user_id: this.loginData.user_id
          }
        }).then(data => {
          this.couponsData = data.data.data
          console.log(this.couponsData)
          // console.log(data)
        })
      },
    },

  };
</script>

<style lang='less' scoped>
  .userpersonal {
    position: relative;
    width: 100%;
  }

  .list {
    list-style: none;
    width: 55vh;
    height: 80vh;
    /*border: 1px solid red;*/
    margin: auto;
  }

  /*优惠券的列表样式*/
  .list-item {
    width: 33rem;
    height: 5rem;
    padding: 3rem 1rem;
    margin: 1.5rem;
    border-radius: 10px;
    line-height: 5rem;
    position: relative;
    background-color: #0a3571;
  }

  .list-item>p:nth-of-type(1) {
    color: white;
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    top: 2rem;
    left: 0.5rem;
    width: 7.8rem;
    border-right: 3px solid white;
  }

  .list-item>p:nth-of-type(2) {
    position: absolute;
    top: 6rem;
    left: 1.5rem;
    color: white;
    /*color: #0a2e5d;*/
    font-size: 14px;
  }

  .list-item>p:nth-of-type(3) {
    position: absolute;
    top: 0;
    left: 10rem;
    font-size: 14px;
    color: #FD9697;
    /*color: #0a2e5d;*/
  }

  .list-item>p:nth-of-type(4) {
    position: absolute;
    top: 3rem;
    left: 10rem;
    /*color: #210f5d;*/
    color: #FD9697;
    font-size: 14px;
    width: 25rem;
  }

  .list-item>p:nth-of-type(5) {
    position: absolute;
    top: 5.6rem;
    left: 14rem;
    font-size: 14px;
    font-weight: 600;
    /*color: #0a2e5d;*/
    color: white;
  }

  .el-button--primary {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    position: absolute;
    top: 190px;
    right: 260px;
    z-index: 1;
    width: 300px;
    height: 60px;
    /*border: 1px solid red;*/
  }

  .list-item img {
    width: 15rem;
    opacity: 0.5;
    position: absolute;
    right: 0.3rem;
    top: 2rem;
  }

  .mytitle {
    position: relative;
  }

  .mytitle h3 {
    position: absolute;
    top: -4.8rem;
    left: 15rem;
    color: black;
  }

  .mytitle span {
    position: absolute;
    top: -3rem;
    right: 10rem;
    font-size: 16px;
    font-weight: 600;
    color: #0A3571;
  }
</style>